<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import request from "@/service/request";
import {Tool} from "@/util/tool";
import {message} from "ant-design-vue";

const docs: any = ref();//所有文档
const route = useRoute();
const tree: any = ref();//格树形结构
const html = ref();
const defaultSelectedKeys: any = ref([]);
const doc=ref();

/**
 * 数据查询
 **/
const handleQuery = () => {
  request.get("/doc/all/" + route.query.ebookId).then((res) => {
    docs.value = res.data
    tree.value = [];
    tree.value = Tool.array2Tree(docs.value, 0);
    if (Tool.isNotEmpty(tree)) {
      defaultSelectedKeys.value = [tree.value[0].id];
      handleQueryContent(tree.value[0].id);
      doc.value=tree.value[0]
    }
  })
};

/**
 * 内容查询
 **/
const handleQueryContent = (id: number) => {
  request.get("/doc/findContent/" + id).then((res) => {
    html.value = res.data
  })
};

// 点赞
const vote = () => {
  request.get('/doc/vote/' + doc.value.id).then((res) => {
    const data = res.data;
    if (data.success) {
      doc.value.voteCount++;
    } else {
      message.error(data.message);
    }
  });
};

const onSelect = (selectedKeys: any, info: any) => {
  if (Tool.isNotEmpty(selectedKeys)) {
    doc.value=info.selectedNodes[0]
    // 加载内容
    handleQueryContent(selectedKeys[0])
  }
};
/**
 * 初始加载
 */
onMounted(() => {
  handleQuery();
});

</script>

<template>
  <a-layout>
    <a-layout-content :style="{background: '#fff' , padding: '24px' , margin: 0 , minHeight: '280px'}">
      <h3 v-if="tree?.length === 0">对不起，找不到相关文档！</h3>
      <a-row>
        <a-col :span="6">
          <a-tree
              v-if="tree?.length > 0"
              :tree-data="tree"
              :field-names="{title: 'name', key: 'id', value: 'id'}"
              :defaultExpandAll="true"
              @select="onSelect"
              v-model:selectedKeys="defaultSelectedKeys"
          >
          </a-tree>
        </a-col>
        <a-col :span="18">
          <div>
            <h2>{{doc?.name}}</h2>
            <div>
              <span>阅读数：{{doc?.viewCount}}</span>&emsp;
              <span>点赞数：{{doc?.voteCount}}</span>
            </div>
            <a-divider style="height:2px;background-color:#9999cc"/>
          </div>
          <div class="wangeditor" v-highlight v-html="html"></div>
          <div class="vote-div">
            <a-button type="primary" shape="round" :size="'large'" @click="vote">
              <template #icon><LikeOutlined /></template>点赞:{{doc?.voteCount}}
            </a-button>
          </div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<style lang="less" scoped>

.wangeditor :deep(p, li) {
  white-space: pre-wrap; /* 保留空格 */
  color: slateblue;
}

.wangeditor :deep(blockquote) {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.wangeditor :deep(code) {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

.wangeditor :deep(pre > code) {
  display: block;
  padding: 10px;
}

.wangeditor :deep(table) {
  border-collapse: collapse;
}

.wangeditor :deep(td, th) {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

.wangeditor :deep(th) {
  background-color: #f1f1f1;
}

.wangeditor :deep(ul, ol) {
  padding-left: 20px;
}

.wangeditor :deep(input[type="checkbox"]) {
  margin-right: 5px;
}

.vote-div {
  text-align: center;
}

/* 图片自适应 */
.wangeditor :deep(img) {
  max-width: 100%;
  height: auto;
}

/* 视频自适应 */
.wangeditor :deep(iframe) {
  width: 100%;
  height: 400px;
}
</style>